import { CloseOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Checkbox, DatePicker, Form, Input, InputNumber, Select, Space } from 'antd'
import { nanoid } from 'nanoid'

import AekInputNumber from '@/components/AekInputNumber'

import { FORM_ITEM_TYPES } from '../constants'

const { RangePicker } = DatePicker

/**
 * 表单项属性编辑组件
 * @param {Object} param0
 * @returns
 */
const FormItemPropertiesEditor = ({ item, onPropertyChange }) => {
  const handleChange = (property, value) => {
    onPropertyChange({ ...item, properties: { ...item.properties, [property]: value } })
  }

  const handleOptionChange = (index, property, value) => {
    const newOptions = [...item.properties.options]
    newOptions[index][property] = value
    handleChange('options', newOptions)
  }

  const addOption = () => {
    const newOptions = [...item.properties.options, { key: nanoid(), label: '新选项', value: '新选项' }]
    handleChange('options', newOptions)
  }

  const removeOption = index => {
    const newOptions = [...item.properties.options]
    newOptions.splice(index, 1)
    handleChange('options', newOptions)
  }

  const layout = {
    labelCol: { flex: '70px' },
    wrapperCol: { flex: '1' },
  }

  return (
    <Form>
      <Form.Item {...layout} label='标题'>
        <Input
          placeholder='请输入'
          value={item.properties.label}
          onChange={e => handleChange('label', e.target.value)}
        />
      </Form.Item>
      {![FORM_ITEM_TYPES.IMAGE_UPLOAD, FORM_ITEM_TYPES.FILE_UPLOAD].includes(item.type) && (
        <Form.Item {...layout} label='占位符'>
          {item.type === FORM_ITEM_TYPES.DATE_RANGE ? (
            <Space.Compact>
              <Input
                placeholder='请输入'
                value={item.properties.placeholder[0]}
                onChange={e => {
                  const [, end] = item.properties.placeholder
                  handleChange('placeholder', [e.target.value, end])
                }}
              />
              <div className='w20px flex-none text-center'>-</div>
              <Input
                placeholder='请输入'
                value={item.properties.placeholder[1]}
                onChange={e => {
                  const [start] = item.properties.placeholder
                  handleChange('placeholder', [start, e.target.value])
                }}
              />
            </Space.Compact>
          ) : (
            <Input
              placeholder='请输入'
              value={item.properties.placeholder}
              onChange={e => handleChange('placeholder', e.target.value)}
            />
          )}
        </Form.Item>
      )}
      <Form.Item {...layout} label='是否必填'>
        <Checkbox checked={item.properties.required} onChange={e => handleChange('required', e.target.checked)} />
      </Form.Item>
      {[
        FORM_ITEM_TYPES.INPUT,
        FORM_ITEM_TYPES.TEXTAREA,
        FORM_ITEM_TYPES.NUMBER,
        FORM_ITEM_TYPES.SELECT,
        FORM_ITEM_TYPES.MULTI_SELECT,
        FORM_ITEM_TYPES.DATE,
        FORM_ITEM_TYPES.DATE_RANGE,
      ].includes(item.type) && (
        <Form.Item {...layout} label='默认值'>
          {(item.type === FORM_ITEM_TYPES.INPUT || item.type === FORM_ITEM_TYPES.TEXTAREA) && (
            <Input
              placeholder='请输入'
              value={item.properties.defaultValue}
              onChange={e => handleChange('defaultValue', e.target.value)}
            />
          )}
          {item.type === FORM_ITEM_TYPES.NUMBER && (
            <AekInputNumber
              placeholder='请输入'
              value={item.properties.defaultValue}
              onChange={value => handleChange('defaultValue', value)}
            />
          )}
          {(item.type === FORM_ITEM_TYPES.SELECT || item.type === FORM_ITEM_TYPES.MULTI_SELECT) && (
            <Select
              placeholder='请选择'
              mode={item.type === FORM_ITEM_TYPES.MULTI_SELECT ? 'multiple' : undefined}
              value={item.properties.defaultValue}
              onChange={value => handleChange('defaultValue', value)}
              options={item.properties.options}
            />
          )}
          {item.type === FORM_ITEM_TYPES.DATE && (
            <DatePicker
              placeholder='请选择'
              value={item.properties.defaultValue}
              onChange={date => handleChange('defaultValue', date)}
            />
          )}
          {item.type === FORM_ITEM_TYPES.DATE_RANGE && (
            <RangePicker
              placeholder='请选择'
              value={item.properties.defaultValue}
              onChange={dates => handleChange('defaultValue', dates)}
            />
          )}
        </Form.Item>
      )}
      <Form.Item {...layout} label='宽度'>
        <Select
          options={[
            { value: '100%', label: '100%' },
            { value: '75%', label: '75%' },
            { value: '50%', label: '50%' },
            { value: '33%', label: '33%' },
            { value: '25%', label: '25%' },
          ]}
          value={item.properties.width}
          onChange={value => handleChange('width', value)}
        />
      </Form.Item>
      {item.type === FORM_ITEM_TYPES.NUMBER && (
        <Form.Item {...layout} label='最小值'>
          <InputNumber
            className='w-full'
            placeholder='请输入'
            value={item.properties.min}
            onChange={value => handleChange('min', value)}
          />
        </Form.Item>
      )}
      {item.type === FORM_ITEM_TYPES.NUMBER && (
        <Form.Item {...layout} label='最大值'>
          <InputNumber
            className='w-full'
            placeholder='请输入'
            value={item.properties.max}
            onChange={value => handleChange('max', value)}
          />
        </Form.Item>
      )}
      {(item.type === FORM_ITEM_TYPES.SELECT || item.type === FORM_ITEM_TYPES.MULTI_SELECT) && (
        <>
          <Form.Item {...layout} label='选项配置'></Form.Item>
          <div className='ml40px'>
            {item.properties.options.map((option, index) => (
              <div className='flex items-center' key={option.key}>
                <Form.Item label={`选项 ${index + 1}`}>
                  <Input
                    value={option.label}
                    placeholder='文本'
                    onChange={e => {
                      handleOptionChange(index, 'value', e.target.value)
                      handleOptionChange(index, 'label', e.target.value)
                    }}
                  />
                </Form.Item>
                <CloseOutlined className='c-del ml10px mb10px' onClick={() => removeOption(index)} />
              </div>
            ))}
            <Button type='primary' size='small' onClick={addOption}>
              <PlusOutlined /> 添加选项
            </Button>
          </div>
        </>
      )}
    </Form>
  )
}

export default FormItemPropertiesEditor
